<template>
  <div class="homePage-container">
    <div class="content">
      <div :gutter="20" class="t-btns">
        <el-popover
            placement="top-start"
            title=""
            width="200"
            trigger="hover">
            <div style="text-align: center;">
                <div style="cursor: pointer;color: rgb(0,121,188);margin-bottom: 10px;" @click="jump('/todoItem/done')">今日办结工单数 ( {{ todayWorkEnd }} )</div>
                <div style="cursor: pointer;color: rgb(0,121,188);"  @click="jump('/todoItem/todo')">我的待办数 ( {{ myTodoCount }} )</div>
            </div>




            <div slot="reference" style="width: 320px;">
              <div
                class="btn flex-center f-blue"
              >
                <!-- <el-badge :value="todayWorkNew"> -->
                <div class="flex-center">
                  <img src="/img/order_3.svg" alt="" />
                  <span>今日新增工单数 ( {{parseInt(todayWorkEnd)  + parseInt(myTodoCount)}} )</span>
                </div>
                <!-- </el-badge> -->
              </div>
            </div>

            <!-- <el-button slot="reference" style="border-width: 0px;background: white;">运维工具</el-button> -->
          </el-popover>






        <div>
          <div class="btn flex-center f-blue" @click="jump('/todoItem/done')">
            <!-- <el-badge :value="todayWorkEnd"> -->
            <div class="flex-center">
              <img src="/img/order_4.svg" alt="" />
              <span>今日办结工单数 ( {{ todayWorkEnd }} )</span>
            </div>
            <!-- </el-badge> -->
          </div>
        </div>
        <!-- <div>
          <div class="btn flex-center f-blue" @click="jump('/todoItem/todo')">
            <el-badge v-if="myTodoCount > 0" :value="myTodoCount">
              <div class="flex-center">
                <img src="/img/order_1.svg" alt="" />
                <span>我的待办数</span>
              </div>
            </el-badge>
            <div v-else class="flex-center">
              <img src="/img/order_1.svg" alt="" />
              <span>我的待办数 ( 0 )</span>
            </div>
          </div>
        </div> -->
        <div>
          <div class="btn flex-center f-blue" @click="jump('/todoItem/todo')">
            <el-badge v-if="myTodoCount > 0" :value="myTodoCount">
              <div class="flex-center">
                <img src="/img/order_2.svg" alt="" />
                <span>我的待办数</span>
              </div>
            </el-badge>
            <div v-else class="flex-center">
              <img src="/img/order_2.svg" alt="" />
              <span>我的待办数 ( 0 )</span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="btn flex-center f-blue"
            @click="jump('/system/noticelist')"
          >
            <el-badge v-if="noticeCount > 0" :value="noticeCount">
              <div class="flex-center">
                <img src="/img/notice_4.svg" alt="" />
                <span>公告未读数</span>
              </div>
            </el-badge>
            <div v-else class="flex-center">
              <img src="/img/notice_4.svg" alt="" />
              <span>公告未读数 ( 0 )</span>
            </div>
          </div>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <div class="c-content">
            <p class="w-title">资源与应用</p>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0" class="line-right">
                <span class="c-title">基础设施统计</span>
                <div id="left_1" class="left-chart"></div>
              </el-col>
              <el-col :span="12" :offset="0">
                <span class="c-title">资源统计</span>
                <div id="left_2" class="left-chart"></div>
              </el-col>
            </el-row>
            <div style="height: 10px"></div>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0" class="line-right">
                <span class="c-title">可分配概览</span>
                <div id="left_3" class="left-chart"></div>
              </el-col>
              <el-col :span="12" :offset="0">
                <span class="c-title">资源月均使用率</span>
                <div id="left_4" class="left-chart"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="12" :offset="0">
          <div class="c-content">
            <div class="flex-between">
              <p class="w-title">资源分配</p>
              <!-- <div>
                <el-select
                  size="mini"
                  placeholder="请选择云服务商"
                  v-model="supplierCode"
                  @change="logicChange"
                >
                  <el-option
                    v-for="item in logicList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div> -->
            </div>
            <span class="c-title">资源分配统计</span>
            <el-row :gutter="20">
              <el-col :span="8" :offset="0" class="line-right">
                <div id="right_1" class="right-chart"></div>
              </el-col>
              <el-col :span="8" :offset="0" class="line-right">
                <div id="right_2" class="right-chart"></div>
              </el-col>
              <el-col :span="8" :offset="0">
                <div id="right_3" class="right-chart"></div>
              </el-col>
            </el-row>
            <div style="height: 10px"></div>
            <el-row :gutter="20">
              <div class="flex-between">
                <span class="c-title">资源分配趋势</span>
                <el-radio-group
                  size="mini"
                  v-model="dateOffset"
                  @change="dateOffsetChange"
                >
                  <!-- <el-radio-button :label="1">最近24小时</el-radio-button> -->
                  <el-radio-button :label="7">最近7天</el-radio-button>
                  <el-radio-button :label="30">最近30天</el-radio-button>
                </el-radio-group>
              </div>
              <el-col :span="24" :offset="0">
                <div id="right_4" class="left-chart"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getCloudServiceHomeData } from "@/api/index";
import { logicList } from "@/api/basic/services";
// import * as echarts from "echarts/core";
// import { TooltipComponent, LegendComponent } from "echarts/components";
// import { PieChart } from "echarts/charts";
// import { CanvasRenderer } from "echarts/renderers";

// // 按需引入
// echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);

export default {
  name: "Home",

  data() {
    return {
      todayWorkNew: 0,
      todayWorkEnd: 0,
      myTodoCount: 0,
      todoCount: 0,
      noticeCount: 0,
      logicList: [],
      supplierCode: "",
      dateOffset: 7,
      left1Data: [],
      left2Data: [],
      left3Data: [],
      left4Data: [],
      right1Data: [],
      right2Data: [],
      right3Data: [],
      right4Data: [],
      right4Trends: [],
    };
  },

  mounted() {
    this.getCharts();
    this.getLogicData();
  },

  methods: {
    jump(path) {
      this.$router.push(path);
    },
    getLogicData() {
      logicList().then((res) => {
        if (res.code === 200) {
          const list = res.rows.map((e) => ({
            label: e.cloudSupplierName,
            value: e.cloudSupplier,
          }));
          list.unshift({ label: "全部服务商", value: "" });
          this.logicList = list;
        }
      });
    },
    logicChange() {
      this.getCharts();
    },
    dateOffsetChange() {
      this.getCharts();
    },
    numFormat(v) {
      if (typeof v === "number") {
        return Math.round(v * 100) / 100;
      }
      return v;
    },
    getCharts() {
      getCloudServiceHomeData({
        isXc: undefined, // 是否信创
        netArea: "", // 资源池，政务外网资源池、互联网资源池，为空查询全部
        supplierCode: this.supplierCode || "", // 云服务商编码，为空查询全部
        dateOffset: this.dateOffset || 1, // 查询的天数，以当前时间往前偏移(天)
      }).then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.todayWorkNew = data.todayWorkNew;
          this.todayWorkEnd = data.todayWorkEnd;
          this.myTodoCount = data.myTodoCount;
          this.todoCount = data.todoCount;
          this.noticeCount = data.noticeCount;
          this.left1Data = [
            {
              value: data.baseComputerNode,
              name: "计算节点",
              unit: "台",
            },
            {
              value: data.baseFbsNode,
              name: "分布式存储",
              unit: "台",
            },
            {
              value: data.baseJzsNode,
              name: "集中式存储",
              unit: "台",
            },
            {
              value: data.baseNetNode,
              name: "网络设备",
              unit: "台",
            },
          ];
          this.left2Data = [
            {
              value: data.resEcs,
              name: "虚拟机",
              unit: "台",
            },
            {
              value: data.resPhy,
              name: "高性能服务器",
              unit: "台",
            },
            {
              value: data.resDisk,
              name: "云硬盘",
              unit: "TB",
            },
            {
              value: data.resWall,
              name: "虚拟防火墙",
              unit: "个",
            },
            {
              value: data.resBalance,
              name: "负载均衡",
              unit: "个",
            },
          ];
          this.left3Data = [
            {
              value: data.canA,
              name: `可分配标准型A 2核4G`,
              unit: "台",
            },
            {
              value: data.canB,
              name: `可分配标准型B 2核8G`,
              unit: "台",
            },
          ];
          this.left4Data = [
            {
              value: data.cpuScale,
              name: "CPU",
              unit: "%",
            },
            {
              value: data.memoryScale,
              name: "内存",
              unit: "%",
            },
          ];
          this.right1Data = [
            {
              value: data.usedCpu,
              name: `vCPU 已分配`,
              unit: "核",
            },
            {
              value: this.numFormat(data.totalCpu - data.usedCpu),
              name: `vCPU 剩余`,
              unit: "核",
            },
          ];
          this.right2Data = [
            {
              value: data.usedMemory,
              name: `内存 已分配`,
              unit: "GB",
            },
            {
              value: this.numFormat(data.totalMemory - data.usedMemory),
              name: `内存 剩余`,
              unit: "GB",
            },
          ];
          this.right3Data = [
            {
              value: data.usedDisk,
              name: `存储 已分配`,
              unit: "TB",
            },
            {
              value: this.numFormat(data.totalDisk - data.usedDisk),
              name: `存储 剩余`,
              unit: "TB",
            },
          ];
          this.right4Data = [
            {
              value: data.cpuTrend,
              name: `vCPU分配率`,
              unit: "%",
            },
            {
              value: data.memoryTrend,
              name: `内存分配率`,
              unit: "%",
            },
            {
              value: data.diskTrend,
              name: `存储分配率`,
              unit: "%",
            },
          ];
          this.right4Trends = data.trends;

          this.chartInit();
        }
      });
    },
    chartInit() {
      this.chartPieInit("left_1", this.left1Data,true);
      this.chartPieInit("left_2", this.left2Data,true);
      this.chartBarInit("left_3", this.left3Data);
      this.chartBarInit("left_4", this.left4Data);
      this.chartPieInit("right_1", this.right1Data);
      this.chartPieInit("right_2", this.right2Data);
      this.chartPieInit("right_3", this.right3Data);
      this.chartLinesInit("right_4", this.right4Data, this.right4Trends);
    },
    chartLinesInit(id, data, xNames) {
      const c = echarts.init(document.getElementById(id));
      c.setOption({
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          formatter(v) {
            const w = [];
            data.forEach((e, i) => {
              const d = v[i];
              const xIndex = d.dataIndex;
              const dd = e.value[xIndex];
              w.push(
                `<div>${d.marker}${e.name}：${dd.value} ${e.unit || ""}</div>`
              );
            });
            return w.join("");
          },
        },
        color: ["#2e76ff", "#45c6fc", "#ff6161"],
        legend: {
          data: data.map((e) => e.name),
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              // color:'',
              fontSize: 10,
            },
          },
          data: xNames,
        },
        yAxis: {
          type: "value",
        },
        series: data.map((e) => ({
          name: e.name,
          type: "line",
          smooth: true,
          data: e.value.map((e) => e.value),
        })),
      });
    },
    chartBarInit(id, data) {
      const c = echarts.init(document.getElementById(id));
      c.setOption({
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter(v) {
            const [d] = v;
            const u = data[d.dataIndex].unit;
            const [a, b] = d.name.split("\n");
            if (b)
              return [
                `<div>${a}</div>`,
                `<div>${b}</div>`,
                `<div>${d.marker}${d.value} ${u || ""}</div>`,
              ].join("");
            return [
              `<div>${d.name}</div>`,
              `<div>${d.marker}${d.value} ${u || ""}</div>`,
            ].join("");
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: ["40%", "40%"],
          data: data.map((e) => {
            const [a, b] = e.name.split(" ");
            if (b) return `${a}\n${b}`;
            return e.name;
          }),
        },
        yAxis: {
          type: "value",
        },
        trigger: "item",
        series: [
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color(p) {
                  const arr = ["#2e76ff", "#45c6fc"];
                  return arr[p.dataIndex];
                },
              },
            },
            data: data.map((e) => e.value),
          },
        ],
      });
    },
    chartPieInit(id, data , flag) {
      let option={
        animationDuration: 5000,
        tooltip: {
          trigger: "item",
          formatter(d) {
            const { data } = d;
            const u = data.unit;
            return [
              `<div>${data.name}</div>`,
              `<div>${d.marker}${d.percent} ${'%' || ""}</div>`,
            ].join("");
          },
        },
        legend: {
          top: "65%",
          left: "center",
          formatter(v) {
            const d = data.find((e) => e.name === v);
            return `${v} ${d.value} ${d.unit || ""}`;
          },
        },
        series: [
          {
            type: "pie",
            center: ["50%", "35%"],
            avoidLabelOverlap: false,
            // hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
                color: "#000",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color(p) {
                  const c = data[p.dataIndex].color;
                  if (c) return c;
                  const arr = [
                    "#2e76ff",
                    "#45c6fc",
                    "#ff6161",
                    "#f5d900",
                    "#7d7d7d",
                  ];
                  return arr[p.dataIndex];
                },
              },
            },
            data,
          },
        ],
      }
      if(flag){
        option.series[0].width='70%'
        option.series[0].center=  ["70%", "35%"]
      }else{
        option.series[0].radius= ["35%", "50%"]
      }
      const c = echarts.init(document.getElementById(id));
      c.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.homePage-container {
  width: 100%;
  background-color: #e8ecf0;
}

.content {
  width: 1400px;
  height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 20px 40px;
}

.w-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.c-title {
  font-size: 16px;
  font-weight: 700;

  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 10px;
    background-color: #409eff;
  }
}

.c-content {
  height: 740px;
  padding: 10px 20px;
  background-color: #fff;
}

.t-btns {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;

  > div {
    // width: 254px;
    width: 320px;
    // padding: 0 40px;
  }

  .btn {
    width: 100%;
    height: 50px;
    border-radius: 2px;
    background-color: #fff;

    &:hover {
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      position: relative;
      left: -2px;
      top: -3px;
    }

    span {
      margin-left: 10px;
    }

    img {
      width: 20px;
      height: 20px;
    }

    .el-badge {
      padding-right: 20px;
    }
  }
}

.left-chart {
  width: 300px;
  height: 300px;
}

.right-chart {
  width: 200px;
  height: 300px;
}

#right_4 {
  width: 600px;
}
</style>
<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.f-blue {
  color: #409eff;
}

.line-right {
  border-right: 0.5px solid #eee;
}
</style>
<style lang="less">
// .homePage-container .el-radio-button--mini .el-radio-button__inner {
//   padding: 4px;
// }
</style>
